<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>通知</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f0eff5;
        }

        .h10 {
            height: 10px;
            background: #f0f0f0;
        }

        .aui-badge {
            display: inline-block;
            width: auto;
            text-align: center;
            min-width: 0.4rem;
            height: 0.4rem;
            line-height: 0.4rem;
            padding: 0 0.2rem;
            font-size: 0.6rem;
            color: #ffffff;
            background-color: #ff2600;
            border-radius: 0.4rem;
            position: absolute;
            top: 0.8rem;
            left: 1%;
            z-index: 99;
        }
    </style>
</head>

<body>
    <div class="aui-refresh-content" id="app" v-cloak style="min-height:100vh;">
        <div class="aui-content aui-margin-b-15 ">
            <ul class="aui-list aui-media-list">
                <li class="h10">

                </li>
                <li class="aui-list-item aui-list-item-middle" v-for='(item,index) in infoList' v-on:click="open_detail_win(item.id,item.title,index,item.isread)">
                    <div class="aui-media-list-item-inner">
                        <div class="aui-list-item-inner aui-list-item-arrow">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-font-size-14">通知:</div>
                                <div class="aui-list-item-right">{{item.time}}</div>
                            </div>
                            <div class="aui-list-item-text">
                                {{item.title}}
                            </div>
                        </div>

                        <div class="aui-badge" v-show="item.isread != 0"></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    apiready = function() {
        if (!$api.getStorage('token')) {
            api.toast({
                msg: '用户未登录',
                duration: 2000,
                location: 'middle'
            });
            return
        }
        var user_data = {
            userid: $api.getStorage('data').userid,
            username: $api.getStorage('data').nickname,
            portrait: $api.getStorage('data').headImg,
        };
        var user_token = $api.getStorage('token');


        var page = 1;
        getList(user_token, page);
    }


    //获取推送列表
    function getList(token, page) {

        api.ajax({
            url: window.Url.getPushList + "/" + page,
            timeout: 300,
            method: 'get', // 提交类型
            dataType: 'json', // 返回数据     json 或 text
            headers: {
                'Content-Type': 'application/json',
                'baseParams': token //token
            }
        }, function(ret, err) {
            if (ret) {

                console.log('通知里面获取到的ret----' + JSON.stringify(ret));

                if (ret.data == null) {
                    return;
                }


                var app = new Vue({
                    el: '#app',
                    data: {
                        infoList: [],
                        page: 1,
                        totalpage: 0
                    },
                    mounted: function() {
                        var $this = this;
                        $this.infoList = ret.data.newsList;

                        // api.sendEvent({
                        //     name: 'send_notice_num',
                        //     extra: {
                        //         notice_num: ret.data.newsList.length
                        //     }
                        // });

                        console.log('获取到的通知信息列表---' + ret.data.newsList.length);
                        var no_read_tz = 0;
                        if(ret.data.newsList.length!=0){
                          for(var i=0;i<ret.data.newsList.length;i++){
                              if(ret.data.newsList[i].isread!=0){
                                 no_read_tz++;
                              }
                          }
                          console.log('未读通知的总数--'+no_read_tz);
                        }





                        var pullRefresh = new auiPullToRefresh({
                            container: document.querySelector('.aui-refresh-content'),
                            triggerDistance: 100
                        }, function(ret) {

                            if (ret.status == "success") {

                                setTimeout(function() {
                                    // var wrap = document.getElementById("demo")
                                    //
                                    //   wrap.insertAdjacentHTML('afterbegin', html);

                                    pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                                }, 1500)
                            }
                        })

                    },
                    methods:{
                       open_detail_win:function(id,title,index,isread){
                         var $this = this;
                         api.openWin({
                             name: 'user_notic_details_win',
                             url: './user_notic_details_win.html',
                             pageParam: {
                                 id: id,
                                 title: title,
                                 isread:isread
                             }
                         });


                        if($api.getStorage('home_tz_num')>0){
                          $api.setStorage('home_tz_num', $api.getStorage('home_tz_num')-1);
                        }else{
                          $api.setStorage('home_tz_num', 0);
                        }



                         $this.infoList[index].isread = 0;
                       }
                    }
                })

            } else {

            }
        });
    }

    //打开详情页
    // function open_detail_win(id, title) {
    //     api.openWin({
    //         name: 'user_notic_details_win',
    //         url: './user_notic_details_win.html',
    //         pageParam: {
    //             id: id,
    //             title: title
    //         }
    //     });
    //
    // }
</script>


<script src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    //刷新
    function setRefresh() {
        var pullRefresh = new auiPullToRefresh({
            container: document.querySelector('.aui-refresh-content'),
            triggerDistance: 100
        }, function(ret) {

            if (ret.status == "success") {
                setTimeout(function() {
                    pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                }, 1500)
            }
        })
    }


    function reload_frm(){
      window.location.href = window.location.href;
    }
</script>

</html>
